<template>
	<view class="my-settle-container">
		<!-- 全选区域 -->
		<label class="radio">
			<radio @click="changeAllState" :checked="isFullCheck" color="#c00000" /><text>全选</text>
		</label>
		<!-- 合计区域 -->
		<view class="amount-box">
			合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
		</view>
		<!-- 结算按钮 -->
		<view class="btn-settle" @click="settlement">
			结算({{checkedCount}})
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCartStore } from '@/store/cart.js';
import { useUserStore } from '@/store/user';
const cartStore = useCartStore()
const userStore  = useUserStore()
const seconds = ref(3)
const timer = ref(null)
const checkedCount = computed(()=>{
	return cartStore.checkedCount
})
const addstr = computed(()=>{
	return userStore.addstr
})
const token = computed(()=>{
	return userStore.token
})
const isFullCheck = computed(()=>{
	return cartStore.checkedCount === cartStore.total
})
const changeAllState = () => {
	cartStore.updateAllGoodsState(!isFullCheck.value)
}
const checkedGoodsAmount = computed(()=>{
	return cartStore.checkedGoodsAmount
})
const settlement = () => {
	if(!checkedCount.value){
		return uni.$showMsg('请选择要结算的商品！')
	}
	if(!addstr.value){
		return uni.$showMsg('请选择收货地址！')
	}
	if(!token.value){
		return delayNavigate()
	}
	payOrder()
}
const showTips = (n) => {
	uni.showToast({
		icon:'none',
		title:'请登录后再结算！' + n + ' 秒后自动跳转到登录页',
		mask:true,
		duration:1500
	})
}
const delayNavigate = () => {
	seconds.value = 3
	showTips(seconds.value)
	timer.value = setInterval(()=>{
		seconds.value--
		if(seconds.value<=0){
			clearInterval(timer.value)
			uni.switchTab({
			    url: '/pages/my/my',
				success() {
					userStore.updateRedirectInfo({
						// 跳转的方式
						openType: 'switchTab',
						// 从哪个页面跳转过去的
						from: '/pages/cart/cart'
					}) 
				}
			})
			return
		}
		showTips(seconds.value)
	},1000)
}
const payOrder = async() =>{
	// 1. 创建订单
	const orderInfo = {
		order_price: 0.01,
		consignee_addr:addstr.value,
		goods:cartStore.cartList.filter(x=>x.goods_status).map(x=>{
			return{	goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price}
		})
	}
	const { data: res } = await 
	uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
	// console.log(res)
	if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
	const orderNumber = res.message.order_number
	// 2. 订单预支付
	const { data: res2 } = await 
	uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { 
	order_number: orderNumber })
	console.log(res2)
	if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
	const payInfo = res2.message.pay	 // 3. 发起微信支付
	uni.requestPayment({
	  timeStamp: String(Date.now()),
	  nonceStr: payInfo.nonce_str,
	  package: orderNumber,
	  signType: 'MD5',
	  paySign: payInfo.sign,
	  success: (res) => {
	   uni.showToast({
	        title: '支付完成！',
	        icon: 'success'
		})
	  },
	  fail: (err) => {
	    uni.$showMsg('订单支付失败！')
	  }
	});
	 
}
</script>

<style lang="scss" scoped>
.my-settle-container{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 50px;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 5px;
	font-size: 14px;
	.radio{
		display: flex;
		align-items: center;
	}
	.amount{
		color: #c00000;
	}
	.btn-settle{
		height: 50px;
		min-width: 100px;
		background-color: #c00000;
		line-height: 50px;
		text-align: center;
		color: white;
		padding: 0 10px;
	}
}
</style>